<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>uniapp的学习笔记 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="uniapp" />
  
  <meta name="description" content="::: tip 介绍uniapp的个人学习笔记:::">
<meta property="og:type" content="article">
<meta property="og:title" content="uniapp的学习笔记">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/08/23/uniapp/2_uniapp/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍uniapp的个人学习笔记:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-08-22T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.557Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="uniapp">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">uniapp的学习笔记</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-08-23</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~24.12K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178557"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍<br>uniapp的个人学习笔记<br><br>:::</p>
<span id="more"></span>

<h1 id="1-uni-app-购物商城项目"><a href="#1-uni-app-购物商城项目" class="headerlink" title="1. uni-app 购物商城项目"></a>1. uni-app 购物商城项目</h1><h2 id="uni-app介绍-和-注意"><a href="#uni-app介绍-和-注意" class="headerlink" title="uni-app介绍 和 注意"></a>uni-app介绍 和 注意</h2><ul>
<li><strong>uni-app 是一个使用 Vue.js 开发所有前端应用的框架</strong>。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信&#x2F;支付宝&#x2F;百度&#x2F;头条&#x2F;QQ&#x2F;钉钉&#x2F;淘宝）、快应用等多个平台。</li>
<li>uni-app 集合了微信小程序的一些 <code>template</code>标签 但是语法和Vue相似 小程序没有跨域问题</li>
<li>在uni-app中的实例是<code> uni</code> 不要再uni-app项目中使用<code>v-show</code> 用<code>v-if</code>替代</li>
<li><code>block</code>标签是uniapp特殊标签 他不会被渲染 但是可以用作<code>v-if</code>来判断 优化性能 也可以进行 <code>v-for</code>渲染</li>
<li><code>&lt;view v-html=&quot;&quot;&gt;&lt;/view&gt;</code> 可以渲染带有样式的数据(md文档)</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/1-7.43264ae4.png" alt="1-7.43264ae4"></p>
<blockquote>
<p><strong>详细的 uni-app 官方文档，请翻阅 <a target="_blank" rel="noopener" href="https://uniapp.dcloud.net.cn/">https://uniapp.dcloud.net.cn/</a></strong></p>
</blockquote>
<h2 id="uniapp中的页面生命周期-小程序"><a href="#uniapp中的页面生命周期-小程序" class="headerlink" title="uniapp中的页面生命周期(小程序)"></a>uniapp中的页面生命周期(小程序)</h2><p><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F">uniapp 页面生命周期官网</a></p>
<blockquote>
<p>常用的一些生命周期</p>
</blockquote>
<ul>
<li><code>onLoad</code>和 <code>onReady</code> tabBar不会多次执行(会销毁) 但是<code>onShow</code>可以多次执行(不会销毁)</li>
<li>可以使用<code>onShow</code> 生命周期 来更新角标的动态数据</li>
</ul>
<table>
<thead>
<tr>
<th>onLoad</th>
<th>监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考<a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/router?id=navigateto">示例</a></th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>onReady</td>
<td>监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发</td>
<td></td>
</tr>
<tr>
<td>onShow</td>
<td>监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td>
<td></td>
</tr>
<tr>
<td>onHide</td>
<td>监听页面隐藏</td>
<td></td>
</tr>
</tbody></table>
<h1 id="2-起步"><a href="#2-起步" class="headerlink" title="2. 起步"></a>2. 起步</h1><h2 id="开发工具"><a href="#开发工具" class="headerlink" title="开发工具"></a>开发工具</h2><p>uni-app 官方推荐使用 <strong>HBuilderX</strong> 来开发 uni-app 类型的项目。主要好处：</p>
<ul>
<li>模板丰富</li>
<li>完善的智能提a示</li>
<li>一键运行</li>
</ul>
<blockquote>
<p>当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、<del>记事本</del>… 等自己喜欢的编辑器！</p>
</blockquote>
<h3 id="下载-安装-HBuilderX"><a href="#下载-安装-HBuilderX" class="headerlink" title="下载 安装 HBuilderX"></a>下载 安装 HBuilderX</h3><ol>
<li>访问 HBuilderX 的官网首页 <a target="_blank" rel="noopener" href="https://www.dcloud.io/hbuilderx.html">https://www.dcloud.io/hbuilderx.html</a></li>
<li>点击首页的 <code>DOWNLOAD</code> 按钮</li>
<li>选择下载 <code>正式版</code> -&gt; <code>App 开发版</code></li>
<li>将下载的 <code>zip包</code> 进行解压缩</li>
<li>将解压之后的文件夹，存放到<strong>纯英文</strong>的目录中（且不能包含括号等特殊字符）</li>
<li>双击 <code>HBuilderX.exe</code> 即可启动 HBuilderX</li>
</ol>
<h3 id="安装-scss-x2F-sass-编译"><a href="#安装-scss-x2F-sass-编译" class="headerlink" title="安装 scss&#x2F;sass 编译"></a>安装 scss&#x2F;sass 编译</h3><ul>
<li>为了方便编写样式（例如：<code>&lt;style lang=&quot;scss&quot;&gt;&lt;/style&gt;</code>），建议安装 <code>scss/sass 编译</code> 插件。</li>
<li>插件下载地址：<strong><a target="_blank" rel="noopener" href="https://ext.dcloud.net.cn/plugin?name=compile-node-sass">https://ext.dcloud.net.cn/plugin?name=compile-node-sass</a></strong></li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/1-1.74fed64c.png" alt="img"></p>
<h3 id="HBuilderX配置"><a href="#HBuilderX配置" class="headerlink" title="HBuilderX配置"></a>HBuilderX配置</h3><ul>
<li>快捷键设置<ul>
<li>操作步骤：工具 -&gt; 预设快捷键方案切换 -&gt; VS Code</li>
</ul>
</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/1-2.1c0c98c6.png" alt="img"></p>
<ul>
<li>修改编辑器的基本设置<ul>
<li>操作步骤：工具 -&gt; 设置 -&gt; 打开 Settings.json 按需进行配置</li>
</ul>
</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210816211539653.png" alt="image-20210816211539653"></p>
<blockquote>
<p>修改代码参考</p>
</blockquote>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;editor.colorScheme&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Default&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.fontSize&quot;</span><span class="punctuation">:</span> <span class="number">12</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.fontFamily&quot;</span><span class="punctuation">:</span> <span class="string">&quot;Consolas&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.fontFmyCHS&quot;</span><span class="punctuation">:</span> <span class="string">&quot;微软雅黑 Light&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.insertSpaces&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.lineHeight&quot;</span><span class="punctuation">:</span> <span class="string">&quot;1.5&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.minimap.enabled&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.mouseWheelZoom&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.onlyHighlightWord&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.tabSize&quot;</span><span class="punctuation">:</span> <span class="number">2</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.wordWrap&quot;</span><span class="punctuation">:</span> <span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;explorer.iconTheme&quot;</span><span class="punctuation">:</span> <span class="string">&quot;vs-seti&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.codeassist.px2rem.enabel&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;editor.codeassist.px2upx.enabel&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h1 id="3-创建项目"><a href="#3-创建项目" class="headerlink" title="3. 创建项目"></a>3. 创建项目</h1><h2 id="新建-uni-app-项目"><a href="#新建-uni-app-项目" class="headerlink" title="新建 uni-app 项目"></a>新建 uni-app 项目</h2><ol>
<li>文件 -&gt; 新建 -&gt; 项目</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/1-4.b7efec14.png" alt="img"></p>
<ol start="2">
<li>填写项目基本信息</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/1-5.585d746d.png" alt="img"></p>
<ol start="3">
<li>项目创建成功</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/1-6.01c783f2.png" alt="img"></p>
<h2 id="项目结构说明"><a href="#项目结构说明" class="headerlink" title="项目结构说明"></a>项目结构说明</h2><ul>
<li>一个 uni-app 项目，默认包含如下目录及文件：</li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">┌─components            <span class="comment">// uni-app组件目录(存放组件)</span></span><br><span class="line">│  └─comp-a.vue         <span class="comment">// 可复用的a组件</span></span><br><span class="line">├─node_modules          <span class="comment">// 储存npm插件</span></span><br><span class="line">├─pages                 <span class="comment">// 存放的是tarbar组件(小程序底部栏组件)</span></span><br><span class="line">├─static                <span class="comment">// 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此</span></span><br><span class="line">├─uni_modules			<span class="comment">// 存放uni-app插件</span></span><br><span class="line">├─main.js               <span class="comment">// Vue初始化入口文件</span></span><br><span class="line">├─App.vue               <span class="comment">// 应用配置，用来配置小程序的全局样式、生命周期函数等 (可以设置警告提示)</span></span><br><span class="line">├─index.html			<span class="comment">// 类似于Vue项目中的App.vue 渲染所有组件到 id=&quot;app&quot;</span></span><br><span class="line">├─package-lock.json     <span class="comment">// 记录npm包的版本</span></span><br><span class="line">├─manifest.json         <span class="comment">// 配置应用名称、appid、logo、版本等打包信息(通常用来配置appid)</span></span><br><span class="line">├─uni.scss				<span class="comment">// uni-app内置的常用样式变量 可以在页面中直接调用样式变量 方便管理整体颜色</span></span><br><span class="line">└─pages.json            <span class="comment">// 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息 (类似以Vue的路由配置)</span></span><br></pre></td></tr></table></figure>

<h2 id="把项目运行到微信开发者工具"><a href="#把项目运行到微信开发者工具" class="headerlink" title="把项目运行到微信开发者工具"></a>把项目运行到微信开发者工具</h2><ol>
<li>填写自己的微信小程序的 AppID：</li>
</ol>
<p><img src="https://www.escook.cn/docs-uni-shop/assets/img/1-8.4c14eb68.png" alt="img"></p>
<ol start="2">
<li>在 HBuilderX 中，配置“微信开发者工具”的<strong>安装路径</strong>：</li>
</ol>
<p><img src="https://www.escook.cn/docs-uni-shop/assets/img/1-9.deca7c09.png" alt="img"></p>
<ol start="3">
<li>在微信开发者工具中，通过 <code>设置 -&gt; 安全设置</code> 面板，开启“微信开发者工具”的<strong>服务端口</strong>：</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/download.png" alt="download"></p>
<ol start="4">
<li>在 HBuilderX 中，点击菜单栏中的 <code>运行 -&gt; 运行到小程序模拟器 -&gt; 微信开发者工具</code>，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/1-11.2637002b.png" alt="img"></p>
<ol start="5">
<li>初次运行成功之后的项目效果：</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/1-12.1b33864e.png" alt="img"></p>
<h2 id="把用到图片导入static文件中"><a href="#把用到图片导入static文件中" class="headerlink" title="把用到图片导入static文件中"></a>把用到图片导入static文件中</h2><p><a target="_blank" rel="noopener" href="https://gitee.com/liu_kaili/shop">项目gitee地址</a> 在这里下载需要的图片</p>
<h1 id="5-配置网络请求"><a href="#5-配置网络请求" class="headerlink" title="5. 配置网络请求"></a>5. 配置网络请求</h1><h2 id="配置请求操作"><a href="#配置请求操作" class="headerlink" title="配置请求操作"></a>配置请求操作</h2><p>由于平台的限制，小程序项目中<strong>不支持 axios</strong>，而且原生的 <code>wx.request()</code> API 功能较为简单，<strong>不支持拦截器</strong>等全局定制的功能。因此，建议在 uni-app 项目中使用 <code>@escook/request-miniprogram</code> 第三方包发起网络数据请求。</p>
<blockquote>
<p>请参考 <strong>@escook&#x2F;request-miniprogram</strong> 的官方文档进行安装、配置、使用</p>
</blockquote>
<blockquote>
<p>官方文档：<a target="_blank" rel="noopener" href="https://www.npmjs.com/package/@escook/request-miniprogram">https://www.npmjs.com/package/@escook/request-miniprogram</a></p>
</blockquote>
<ul>
<li>在项目的 <code>main.js</code> 入口文件中，通过如下的方式进行配置：</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// #ifndef VUE3</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//----------------------- 网络请求配置</span></span><br><span class="line"><span class="comment">// 1. 下载网络配置包</span></span><br><span class="line"><span class="comment">// npm install @escook/request-miniprogram</span></span><br><span class="line"><span class="comment">// 2. 引入网络配置包</span></span><br><span class="line"><span class="keyword">import</span> &#123; $http &#125; <span class="keyword">from</span> <span class="string">&#x27;@escook/request-miniprogram&#x27;</span></span><br><span class="line"><span class="comment">// 3. 把$http挂载到全局对象下 在uni-app中导入 uni-app全局对象是uni</span></span><br><span class="line">uni.<span class="property">$http</span> = $http</span><br><span class="line"><span class="comment">// 4. 配置baseUrl(全局基础路径)</span></span><br><span class="line">$http.<span class="property">baseUrl</span> = <span class="string">&#x27;https://www.uinav.com&#x27;</span></span><br><span class="line"><span class="comment">// 5. 配置请求拦截器</span></span><br><span class="line"><span class="comment">// 请求开始之前做一些事情</span></span><br><span class="line">$http.<span class="property">beforeRequest</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"><span class="comment">// 打开正在加载中弹窗</span></span><br><span class="line"><span class="comment">// wx.showLoading(&#123; title &#125;)</span></span><br><span class="line">	uni.<span class="title function_">showLoading</span>(&#123;</span><br><span class="line">		<span class="attr">title</span>:<span class="string">&quot;加载中..........&quot;</span></span><br><span class="line">	&#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 6. 配置请求后拦截器(响应拦截器)</span></span><br><span class="line"><span class="comment">// 请求完成之后做一些事情</span></span><br><span class="line">$http.<span class="property">afterRequest</span> = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line"><span class="comment">// 关闭正在请求中弹窗</span></span><br><span class="line">uni.<span class="title function_">hideLoading</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 7. 封装加载失败提示</span></span><br><span class="line"><span class="comment">// 封装的展示消息提示的方法</span></span><br><span class="line">uni.<span class="property">$showMsg</span> = <span class="keyword">function</span> (<span class="params">title = <span class="string">&#x27;数据加载失败！&#x27;</span>, duration = <span class="number">1500</span></span>) &#123;</span><br><span class="line">  uni.<span class="title function_">showToast</span>(&#123;</span><br><span class="line">    <span class="comment">// 提示信息可以自定义 默认是 数据加载失败！</span></span><br><span class="line">    title,</span><br><span class="line">    <span class="comment">// 提示的持续时间</span></span><br><span class="line">    duration,</span><br><span class="line">    <span class="comment">// 提示的字体图标</span></span><br><span class="line">    <span class="attr">icon</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property">config</span>.<span class="property">productionTip</span> = <span class="literal">false</span></span><br><span class="line"><span class="title class_">App</span>.<span class="property">mpType</span> = <span class="string">&#x27;app&#x27;</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">    ...<span class="title class_">App</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// ----------------------------</span></span><br><span class="line">app.$mount()</span><br><span class="line"><span class="comment">// #endif</span></span><br></pre></td></tr></table></figure>

<h2 id="携带请求头-进行请求操作"><a href="#携带请求头-进行请求操作" class="headerlink" title="携带请求头 进行请求操作"></a>携带请求头 进行请求操作</h2><ul>
<li>有的接口需要携带请求头(token) 上传接口获取数据 这些接口一般都要特殊统一的请求地址<ul>
<li>比如url地址携带<code>/my/</code> 就是需要请求头的接口</li>
<li>一般请求头名称为<code>header</code> 后端需求的请求头属性名(键)为<code>Authorization</code></li>
<li>在配置请求拦截器中配置携带请求头的操作</li>
</ul>
</li>
</ul>
<blockquote>
<p>假设需要请求头的url地址 都携带<code>/my/</code> </p>
</blockquote>
<ul>
<li>需要在请求插件的请求拦截器中配置请求头操作</li>
<li>使用<code>indexOf()</code>方法 查询url地址是否携带<code>/my/</code> 如果携带(非-1)就添加请求头</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">// #ifndef VUE3</span><br><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import App from &#x27;./App&#x27;</span><br><span class="line">// 导入Vuex</span><br><span class="line">import store from &#x27;./store/store.js&#x27;</span><br><span class="line"></span><br><span class="line">//----------------------- 网络请求配置</span><br><span class="line">// 1. 下载网络配置包</span><br><span class="line">// npm install @escook/request-miniprogram</span><br><span class="line">// 2. 引入网络配置包</span><br><span class="line">import &#123; $http &#125; from &#x27;@escook/request-miniprogram&#x27;</span><br><span class="line">// 3. 把$http挂载到全局对象下 在uni-app中导入 uni-app全局对象是uni</span><br><span class="line">uni.$http = $http</span><br><span class="line">// 4. 配置baseUrl(全局基础路径)</span><br><span class="line">$http.baseUrl = &#x27;https://www.uinav.com&#x27;</span><br><span class="line">// 5. 配置请求拦截器</span><br><span class="line">// 请求开始之前做一些事情</span><br><span class="line">$http.beforeRequest = function(options)&#123;</span><br><span class="line">  console.log(options)</span><br><span class="line">// 打开正在加载中弹窗</span><br><span class="line">// wx.showLoading(&#123; title &#125;)</span><br><span class="line">	uni.showLoading(&#123;</span><br><span class="line">		title:&quot;加载中..........&quot;</span><br><span class="line">	&#125;)</span><br><span class="line"><span class="addition">+  // 添加请求头</span></span><br><span class="line"><span class="addition">+  if(options.url.indexOf(&#x27;/my/&#x27;) !== -1)&#123;</span></span><br><span class="line"><span class="addition">+    // 获取vuex储存的请求头 设置Authorization储存token(后端需求)</span></span><br><span class="line"><span class="addition">+    options.header.Authorization = store.state.m_user.token</span></span><br><span class="line"><span class="addition">+  &#125;</span></span><br><span class="line">&#125;</span><br><span class="line">// 6. 配置请求后拦截器(响应拦截器)</span><br><span class="line">// 请求完成之后做一些事情</span><br><span class="line">$http.afterRequest = function()&#123;</span><br><span class="line">// 关闭正在请求中弹窗</span><br><span class="line">uni.hideLoading()</span><br><span class="line">&#125;</span><br><span class="line">// 7. 封装加载失败提示</span><br><span class="line">// 封装的展示消息提示的方法</span><br><span class="line">uni.$showMsg = function (title = &#x27;数据加载失败！&#x27;, duration = 1500) &#123;</span><br><span class="line">  uni.showToast(&#123;</span><br><span class="line">    // 提示信息可以自定义 默认是 数据加载失败！</span><br><span class="line">    title,</span><br><span class="line">    // 提示的持续时间</span><br><span class="line">    duration,</span><br><span class="line">    // 提示的字体图标</span><br><span class="line">    icon: &#x27;none&#x27;,</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = false</span><br><span class="line">App.mpType = &#x27;app&#x27;</span><br><span class="line">// vue2挂载实例</span><br><span class="line">const app = new Vue(&#123;</span><br><span class="line">    ...App,</span><br><span class="line">    store</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">// ----------------------------</span><br><span class="line">app.$mount()</span><br><span class="line">// #endif</span><br></pre></td></tr></table></figure>



<h1 id="6-路由设置选项详解pages-json-非步骤"><a href="#6-路由设置选项详解pages-json-非步骤" class="headerlink" title="6. 路由设置选项详解pages.json(非步骤)"></a>6. 路由设置选项详解<code>pages.json</code>(非步骤)</h1><h2 id="分包和主包场景"><a href="#分包和主包场景" class="headerlink" title="分包和主包场景"></a>分包和主包场景</h2><ul>
<li><strong>分包可以减少小程序首次启动时的加载时间</strong>(类似于Vue路由的按需加载) 主包会在小程序加载时候全部加载</li>
<li>分包主要用于tabBar(底部导航) 分包主要用于tabBar中的组件(页面中的组件)</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210816222345607.png" alt="image-20210816222345607"></p>
<h2 id="设置主包分包"><a href="#设置主包分包" class="headerlink" title="设置主包分包"></a>设置主包分包</h2><p>我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下：</p>
<ul>
<li>分包主要用于tabBar(底部导航) 分包主要用于tabBar中的组件(页面中的组件)</li>
</ul>
<blockquote>
<p>配置分包主包例子</p>
</blockquote>
<ol>
<li>在项目根目录中，创建分包的根目录，命名为 <code>subpkg</code></li>
<li>在 <code>pages.json</code> 中，和 <code>pages</code> 节点平级的位置声明 <code>subPackages</code> 节点，用来定义分包相关的结构</li>
<li>在路由中 配置分包的名称 需要和创建的组件文件夹一致</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">	<span class="comment">//----------------------------- 配置主包路由</span></span><br><span class="line">	<span class="attr">&quot;pages&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">&#123;</span></span><br><span class="line">            <span class="comment">// 配置主包路径</span></span><br><span class="line">            <span class="attr">&quot;path&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;pages/home/home&quot;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="comment">// 配置分包样式</span></span><br><span class="line">            <span class="attr">&quot;style&quot;</span> <span class="punctuation">:</span>                                                                                    </span><br><span class="line">            <span class="punctuation">&#123;</span></span><br><span class="line">              <span class="comment">// 配置小程序上方标题显示</span></span><br><span class="line">                <span class="attr">&quot;navigationBarTitleText&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">              <span class="comment">// 允许上拉刷新数据</span></span><br><span class="line">                <span class="attr">&quot;enablePullDownRefresh&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span></span><br><span class="line">            <span class="punctuation">&#125;</span></span><br><span class="line">        <span class="punctuation">&#125;</span>   </span><br><span class="line">    <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">	<span class="comment">//----------------------------- 配置分包路由</span></span><br><span class="line">	  <span class="attr">&quot;subPackages&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">	    <span class="punctuation">&#123;</span></span><br><span class="line">         <span class="comment">// 配置分包的名称 需要和创建的组件文件夹一致</span></span><br><span class="line">	      <span class="attr">&quot;root&quot;</span><span class="punctuation">:</span> <span class="string">&quot;subpkg&quot;</span><span class="punctuation">,</span></span><br><span class="line">	      <span class="attr">&quot;pages&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">&#123;</span></span><br><span class="line">                    <span class="comment">// 配置分包路径</span></span><br><span class="line">                    <span class="attr">&quot;path&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;goods_detail/goods_detail&quot;</span><span class="punctuation">,</span></span><br><span class="line">                    <span class="comment">// 配置分包样式</span></span><br><span class="line">                    <span class="attr">&quot;style&quot;</span> <span class="punctuation">:</span>                                                                                    </span><br><span class="line">                <span class="punctuation">&#123;</span></span><br><span class="line">                    <span class="comment">// 配置小程序上方标题显示</span></span><br><span class="line">                    <span class="attr">&quot;navigationBarTitleText&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">                    <span class="comment">// 允许上拉刷新数据</span></span><br><span class="line">                    <span class="attr">&quot;enablePullDownRefresh&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span></span><br><span class="line">                <span class="punctuation">&#125;</span></span><br><span class="line">             <span class="punctuation">&#125;</span>    </span><br><span class="line">	  <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="设置主包tabBar"><a href="#设置主包tabBar" class="headerlink" title="设置主包tabBar"></a>设置主包tabBar</h2><ul>
<li>设置主包路径的组件 通常作为tabBar(底部导航)来使用</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210816224822572.png" alt="image-20210816224822572"></p>
<blockquote>
<p>配置tabBar案例</p>
</blockquote>
<ol>
<li>配置主包路由后 再配置tarBar(底部导航栏)</li>
<li>tarBar</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">	<span class="comment">//----------------------------- 配置主包路由</span></span><br><span class="line">	<span class="attr">&quot;pages&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">&#123;</span></span><br><span class="line">            <span class="comment">// 配置主包路径</span></span><br><span class="line">            <span class="attr">&quot;path&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;pages/home/home&quot;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="comment">// 配置分包样式</span></span><br><span class="line">            <span class="attr">&quot;style&quot;</span> <span class="punctuation">:</span>                                                                                    </span><br><span class="line">            <span class="punctuation">&#123;</span></span><br><span class="line">              <span class="comment">// 配置小程序上方标题显示</span></span><br><span class="line">                <span class="attr">&quot;navigationBarTitleText&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">              <span class="comment">// 允许上拉刷新数据</span></span><br><span class="line">                <span class="attr">&quot;enablePullDownRefresh&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span></span><br><span class="line">            <span class="punctuation">&#125;</span></span><br><span class="line">            </span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">	<span class="comment">//--------------------------- 添加tarBar底部导航栏</span></span><br><span class="line">	<span class="attr">&quot;tabBar&quot;</span><span class="punctuation">:</span><span class="punctuation">&#123;</span></span><br><span class="line">		<span class="comment">// 配置底部导航选择后的颜色</span></span><br><span class="line">		<span class="attr">&quot;selectedColor&quot;</span><span class="punctuation">:</span><span class="string">&quot;#c00000&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="attr">&quot;list&quot;</span><span class="punctuation">:</span><span class="punctuation">[</span><span class="punctuation">&#123;</span></span><br><span class="line">			<span class="comment">// 配置底部导航对应的组件路径</span></span><br><span class="line">			<span class="attr">&quot;pagePath&quot;</span><span class="punctuation">:</span><span class="string">&quot;pages/home/home&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="comment">// 配置底部的文本</span></span><br><span class="line">			<span class="attr">&quot;text&quot;</span><span class="punctuation">:</span><span class="string">&quot;首页&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="comment">// 配置底部导航的未选中图标(静态图标)</span></span><br><span class="line">			<span class="attr">&quot;iconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/index.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="comment">// 配置底部导航的选中图标</span></span><br><span class="line">			<span class="attr">&quot;selectedIconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/index_selected.png&quot;</span></span><br><span class="line">		<span class="punctuation">&#125;</span><span class="punctuation">]</span></span><br><span class="line">	<span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h2 id="设置小程序全局样式"><a href="#设置小程序全局样式" class="headerlink" title="设置小程序全局样式"></a>设置小程序全局样式</h2><ol>
<li><p>在 <code>pages.json</code> 中，配置选程序的全局设置</p>
</li>
<li><p>可以设置小程序全局样式 (比如主题颜色 主标题等)</p>
</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置小程序全局样式</span></span><br><span class="line">	<span class="attr">&quot;globalStyle&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">		<span class="comment">// 更改小程序 主题标题颜色</span></span><br><span class="line">		<span class="attr">&quot;navigationBarTextStyle&quot;</span><span class="punctuation">:</span> <span class="string">&quot;white&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="comment">// 更改小程序 主题标题</span></span><br><span class="line">		<span class="attr">&quot;navigationBarTitleText&quot;</span><span class="punctuation">:</span> <span class="string">&quot;黑马优购&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="comment">// 设置小程序主体颜色</span></span><br><span class="line">		<span class="attr">&quot;navigationBarBackgroundColor&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#c00000&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="comment">// 设置窗口的背景色</span></span><br><span class="line">		<span class="attr">&quot;backgroundColor&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#F8F8F8&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="attr">&quot;app-plus&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">			<span class="attr">&quot;background&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#efeff4&quot;</span></span><br><span class="line">		<span class="punctuation">&#125;</span></span><br><span class="line"> <span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="删除组件路由"><a href="#删除组件路由" class="headerlink" title="删除组件路由"></a>删除组件路由</h2><ul>
<li>在 HBuilderX 中 如果删除一个组件 是不会自动删除配置的路由 所以必须要手动删除 组件配置的路由</li>
</ul>
<blockquote>
<p>index组件删除例子</p>
</blockquote>
<ol>
<li>在 HBuilderX 中，把 <code>pages</code> 目录下的 <code>index首页文件夹</code> 删除掉</li>
<li>同时，把 <code>page.json</code> 中记录的 <code>index 首页</code> 路径删除掉</li>
<li>为了防止小程序运行失败，在微信开发者工具中，手动删除 <code>pages</code> 目录下的 <code>index 首页文件夹</code></li>
<li>同时，把 <code>components</code> 目录下的 <code>uni-link 组件文件夹</code> 删除掉</li>
</ol>
<h2 id="路由组件跳转传参"><a href="#路由组件跳转传参" class="headerlink" title="路由组件跳转传参"></a>路由组件跳转传参</h2><ul>
<li>路由的跳转分为标签式和代码式</li>
<li>uniapp里面的路由跳转是通过组件本地路由进行跳转的 而非url地址跳转</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 标签式跳转		</span></span><br><span class="line">		&lt;navigator <span class="keyword">class</span>=<span class="string">&quot;swiper-item&quot;</span> :url=<span class="string">&quot;&#x27;/subpkg/goods_detail/goods_detail&#x27;&quot;</span>&gt;&lt;/navigator&gt;</span><br><span class="line"><span class="comment">// 代码式跳转</span></span><br><span class="line">			uni.<span class="title function_">switchTab</span>(&#123;</span><br><span class="line">				<span class="comment">// url跳转的路径地址 (组件所在的路径 非url地址)</span></span><br><span class="line">				<span class="attr">url</span>: <span class="string">&#x27;/pages/cate/cate&#x27;</span>,</span><br><span class="line">               <span class="attr">success</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">               <span class="comment">// 跳转成功后 进行的操作(通过向Vuex储存一些重定向)</span></span><br><span class="line">             &#125;</span><br><span class="line">			&#125;)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>标签式跳转 (不常用)</p>
</blockquote>
<ul>
<li>通过<code>&lt;navigator :url=&#39;&#39;&gt;&lt;/navigator&gt;</code>标签进行跳转<ul>
<li>只可以进行 非tabBar(底部导航栏)的跳转</li>
<li><code>:url</code>可以动态绑定跳转地址 并且支持参数的拼接</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 标签式跳转</span></span><br><span class="line"><span class="comment">// :url跳转的路径地址 (组件所在的路径 非url地址)</span></span><br><span class="line">  &lt;navigator <span class="keyword">class</span>=<span class="string">&quot;swiper-item&quot;</span> :url=<span class="string">&quot;&#x27;/subpkg/goods_detail/goods_detail&#x27;&quot;</span>&gt;&lt;/navigator&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>标签式路由传参方式<ul>
<li><code>:url</code>通过绑定跳转地址 并且拼接携带的参数进行拼接</li>
<li>传递的参数是一个对象</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 动态携带参数	goods_id=&quot;参数&quot; 进行路由传参</span></span><br><span class="line">	&lt;navigator <span class="keyword">class</span>=<span class="string">&quot;swiper-item&quot;</span> :url=<span class="string">&quot;&#x27;/subpkg/goods_detail/goods_detail?goods_id=&#x27; + item.goods_id&quot;</span>&gt;</span><br><span class="line">	&lt;/navigator&gt;</span><br><span class="line"><span class="comment">// 传递参数类型</span></span><br><span class="line">&#123;<span class="attr">goods_id</span>: <span class="string">&quot;参数&quot;</span>&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码式跳转</p>
</blockquote>
<ul>
<li><p>代码式跳转 通过<code>@click</code>等事件监听 触发跳转方法 实现跳转</p>
<ul>
<li><font color =#ff3040>tarBar(底部导航栏)跳转方法 <code>uni.switchTab()</code></font></li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210817000610303.png" alt="image-20210817000610303"></p>
<ul>
<li><font color =#ff3040>普通组件跳转方法 <code>uni.navigateTo()</code></font></li>
<li><code>url</code>可以动态绑定跳转地址 并且支持参数的拼接</li>
<li><code> success: () =&gt; &#123;&#125;</code> 跳转成功后 进行的操作(通过向Vuex储存一些重定向)</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;view @click=&quot;clickHandler&quot;&gt;&lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">		name:&quot;SearchBar&quot;,</span><br><span class="line">		methods:&#123;</span><br><span class="line">			clickHandler()&#123;</span><br><span class="line">			// 进行普通组件跳转</span><br><span class="line">				uni.navigateTo(&#123;</span><br><span class="line">				// 跳转的路径</span><br><span class="line">					url:&#x27;/subpkg/goods-list/goods-list&#x27;,</span><br><span class="line">                    success: () =&gt; &#123;</span><br><span class="line">               // 跳转成功后 进行的操作(通过向Vuex储存一些重定向)</span><br><span class="line">            		 &#125;</span><br><span class="line">				&#125;)</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>代码式跳转路由传参方式<ul>
<li><code>url</code>通过绑定跳转地址 并且拼接携带的参数进行拼接</li>
<li>传递的参数是一个对象</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">uni.<span class="title function_">navigateTo</span>(&#123;</span><br><span class="line"> <span class="comment">// 动态携带参数 进行路由传参</span></span><br><span class="line">	<span class="attr">url</span>:<span class="string">&#x27;/subpkg/goods-list/goods-list?&#x27;</span> + query</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="获取路由跳转的参数"><a href="#获取路由跳转的参数" class="headerlink" title="获取路由跳转的参数"></a>获取路由跳转的参数</h2><ul>
<li>接收路由传递的参数 是对象格式 并且如果带有<code>=</code> 也会转换为对象</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210817002028843.png" alt="image-20210817002028843"></p>
<ul>
<li>通过<code>onLoad()</code> 组件渲染时获取传递的参数(类似于Vue的 <code>created()</code>)</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">	<span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">	<span class="comment">// 通过onLoad参数 获取到路由传递的参数</span></span><br><span class="line">    <span class="title function_">onLoad</span>(<span class="params">data</span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(data)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h1 id="7-创建tabBar"><a href="#7-创建tabBar" class="headerlink" title="7. 创建tabBar"></a>7. 创建tabBar</h1><h2 id="创建-tabBar-页面"><a href="#创建-tabBar-页面" class="headerlink" title="创建 tabBar 页面"></a>创建 tabBar 页面</h2><p>在 <code>pages</code> 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。在 HBuilderX 中，可以通过如下的两个步骤，快速新建页面：</p>
<ul>
<li>tabBar 页面不需要设置分包 分包跟Vue的按需加载道理一致</li>
</ul>
<ol>
<li>在 <code>pages</code> 目录上鼠标右键，选择<strong>新建页面</strong></li>
<li>在弹出的窗口中，填写<strong>页面的名称</strong>、<strong>勾选 scss 模板</strong>之后，点击创建按钮。</li>
<li>需要在路由中注册 并且使用主包炉头</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210816224325598.png" alt="image-20210816224325598"></p>
<h2 id="配置-tabBar-效果"><a href="#配置-tabBar-效果" class="headerlink" title="配置 tabBar 效果"></a>配置 tabBar 效果</h2><ol>
<li>需要先配置主包的路径 再 配置 tabBar 效果 (tabBar 可以设置为主包)</li>
<li>修改项目根目录中的 <code>pages.json</code> 配置文件，新增 <code>tabBar</code> 的配置节点如下：</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">	<span class="comment">//----------------------------- 配置主包路由</span></span><br><span class="line">	<span class="attr">&quot;pages&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">&#123;</span></span><br><span class="line">            <span class="comment">// 配置主包路径</span></span><br><span class="line">            <span class="attr">&quot;path&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;pages/home/home&quot;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="comment">// 配置分包样式</span></span><br><span class="line">            <span class="attr">&quot;style&quot;</span> <span class="punctuation">:</span>                                                                                    </span><br><span class="line">            <span class="punctuation">&#123;</span></span><br><span class="line">              <span class="comment">// 配置小程序上方标题显示</span></span><br><span class="line">                <span class="attr">&quot;navigationBarTitleText&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">              <span class="comment">// 允许上拉刷新数据</span></span><br><span class="line">                <span class="attr">&quot;enablePullDownRefresh&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span></span><br><span class="line">            <span class="punctuation">&#125;</span></span><br><span class="line">            </span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">        <span class="punctuation">,</span><span class="punctuation">&#123;</span></span><br><span class="line">            <span class="attr">&quot;path&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;pages/cart/cart&quot;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;style&quot;</span> <span class="punctuation">:</span>                                                                                    </span><br><span class="line">            <span class="punctuation">&#123;</span></span><br><span class="line">                <span class="attr">&quot;navigationBarTitleText&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">                <span class="attr">&quot;enablePullDownRefresh&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span></span><br><span class="line">            <span class="punctuation">&#125;</span></span><br><span class="line">            </span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">        <span class="punctuation">,</span><span class="punctuation">&#123;</span></span><br><span class="line">            <span class="attr">&quot;path&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;pages/cate/cate&quot;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;style&quot;</span> <span class="punctuation">:</span>                                                                                    </span><br><span class="line">            <span class="punctuation">&#123;</span></span><br><span class="line">                <span class="attr">&quot;navigationBarTitleText&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">                <span class="attr">&quot;enablePullDownRefresh&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span></span><br><span class="line">            <span class="punctuation">&#125;</span></span><br><span class="line">            </span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">        <span class="punctuation">,</span><span class="punctuation">&#123;</span></span><br><span class="line">            <span class="attr">&quot;path&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;pages/my/my&quot;</span><span class="punctuation">,</span></span><br><span class="line">            <span class="attr">&quot;style&quot;</span> <span class="punctuation">:</span>                                                                                    </span><br><span class="line">            <span class="punctuation">&#123;</span></span><br><span class="line">                <span class="attr">&quot;navigationBarTitleText&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span><span class="punctuation">,</span></span><br><span class="line">                <span class="attr">&quot;enablePullDownRefresh&quot;</span><span class="punctuation">:</span> <span class="keyword">false</span></span><br><span class="line">            <span class="punctuation">&#125;</span></span><br><span class="line">            </span><br><span class="line">        <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line"><span class="comment">//----------------------------- 添加tarBar底部导航栏</span></span><br><span class="line">	<span class="attr">&quot;tabBar&quot;</span><span class="punctuation">:</span><span class="punctuation">&#123;</span></span><br><span class="line">		<span class="comment">// 配置底部导航选择后的颜色</span></span><br><span class="line">		<span class="attr">&quot;selectedColor&quot;</span><span class="punctuation">:</span><span class="string">&quot;#c00000&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="attr">&quot;list&quot;</span><span class="punctuation">:</span><span class="punctuation">[</span><span class="punctuation">&#123;</span></span><br><span class="line">			<span class="comment">// 配置底部导航对应的组件路径</span></span><br><span class="line">			<span class="attr">&quot;pagePath&quot;</span><span class="punctuation">:</span><span class="string">&quot;pages/home/home&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="comment">// 配置底部的文本</span></span><br><span class="line">			<span class="attr">&quot;text&quot;</span><span class="punctuation">:</span><span class="string">&quot;首页&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="comment">// 配置底部导航的未选中图标</span></span><br><span class="line">			<span class="attr">&quot;iconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/index.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="comment">// 配置底部导航的选中图标</span></span><br><span class="line">			<span class="attr">&quot;selectedIconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/index_selected.png&quot;</span></span><br><span class="line">		<span class="punctuation">&#125;</span><span class="punctuation">,</span><span class="punctuation">&#123;</span></span><br><span class="line">			<span class="attr">&quot;pagePath&quot;</span><span class="punctuation">:</span><span class="string">&quot;pages/cate/cate&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="attr">&quot;text&quot;</span><span class="punctuation">:</span><span class="string">&quot;分类&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="attr">&quot;iconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/category.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="attr">&quot;selectedIconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/category_selected.png&quot;</span></span><br><span class="line">		<span class="punctuation">&#125;</span><span class="punctuation">,</span><span class="punctuation">&#123;</span></span><br><span class="line">			<span class="attr">&quot;pagePath&quot;</span><span class="punctuation">:</span><span class="string">&quot;pages/cart/cart&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="attr">&quot;text&quot;</span><span class="punctuation">:</span><span class="string">&quot;购物车&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="attr">&quot;iconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/cart.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="attr">&quot;selectedIconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/cart_selected.png&quot;</span></span><br><span class="line">		<span class="punctuation">&#125;</span><span class="punctuation">,</span><span class="punctuation">&#123;</span></span><br><span class="line">			<span class="attr">&quot;pagePath&quot;</span><span class="punctuation">:</span><span class="string">&quot;pages/my/my&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="attr">&quot;text&quot;</span><span class="punctuation">:</span><span class="string">&quot;我的&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="attr">&quot;iconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/user.png&quot;</span><span class="punctuation">,</span></span><br><span class="line">			<span class="attr">&quot;selectedIconPath&quot;</span><span class="punctuation">:</span><span class="string">&quot;static/user_selected.png&quot;</span></span><br><span class="line">		<span class="punctuation">&#125;</span><span class="punctuation">]</span></span><br><span class="line">	<span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="配置-小程序全局样式"><a href="#配置-小程序全局样式" class="headerlink" title="配置 小程序全局样式"></a>配置 小程序全局样式</h2><ol>
<li>打开 <code>pages.json</code> 这个全局的配置文件</li>
<li>修改 <code>globalStyle</code> 节点如下：</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//----------------------------- 设置小程序全局样式</span></span><br><span class="line">	<span class="attr">&quot;globalStyle&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">		<span class="comment">// 更改小程序 主题标题颜色</span></span><br><span class="line">		<span class="attr">&quot;navigationBarTextStyle&quot;</span><span class="punctuation">:</span> <span class="string">&quot;white&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="comment">// 更改小程序 主题标题</span></span><br><span class="line">		<span class="attr">&quot;navigationBarTitleText&quot;</span><span class="punctuation">:</span> <span class="string">&quot;黑马优购&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="comment">// 设置小程序主体颜色</span></span><br><span class="line">		<span class="attr">&quot;navigationBarBackgroundColor&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#c00000&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="comment">// 设置窗口的背景色</span></span><br><span class="line">		<span class="attr">&quot;backgroundColor&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#F8F8F8&quot;</span><span class="punctuation">,</span></span><br><span class="line">		<span class="attr">&quot;app-plus&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">			<span class="attr">&quot;background&quot;</span><span class="punctuation">:</span> <span class="string">&quot;#efeff4&quot;</span></span><br><span class="line">		<span class="punctuation">&#125;</span></span><br><span class="line">	<span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<h1 id="8-uniapp-组件的使用"><a href="#8-uniapp-组件的使用" class="headerlink" title="8. uniapp 组件的使用"></a>8. uniapp 组件的使用</h1><h2 id="组件的使用注册"><a href="#组件的使用注册" class="headerlink" title="组件的使用注册"></a>组件的使用注册</h2><ul>
<li>uniapp里面的组件使用 无需<code>import</code>导入 只需要在 component文件夹创建即可</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210817130914453.png" alt="image-20210817130914453"></p>
<blockquote>
<p>组件创建和使用步骤</p>
</blockquote>
<ol>
<li>在 component文件夹里面创建 uniapp组件 需要勾选创建同名目录 组件导入以组件名为基准</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210817132353096.png" alt="image-20210817132353096"></p>
<ol start="2">
<li>在需要的组件中 导入该组件<ul>
<li>在uniapp项目中 无需<code>import</code>导入 直接导入component文件夹的组件设置的名称即可</li>
</ul>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;view&gt;</span><br><span class="line">    &lt;!-- 直接导入component文件夹的组件设置的名称即可 --&gt;</span><br><span class="line">      &lt;my-goods&gt;&lt;/my-goods&gt;</span><br><span class="line">    &lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>



<h1 id="9-uniapp-父子组件的传值"><a href="#9-uniapp-父子组件的传值" class="headerlink" title="9. uniapp 父子组件的传值"></a>9. uniapp 父子组件的传值</h1><h2 id="父向子传值"><a href="#父向子传值" class="headerlink" title="父向子传值"></a>父向子传值</h2><ul>
<li>uniapp父子传值操作和vue一致 但是通过uniapp会通过路由来传值</li>
</ul>
<blockquote>
<p>父组件向子组件传值</p>
</blockquote>
<ul>
<li>传递给<code>my-goods</code>组件 通过<code>:</code>向子组件传递数据</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;view&gt;</span><br><span class="line">      &lt;!-- 向子组件传递数据 --&gt;</span><br><span class="line">     &lt;my-goods :goods=&#x27;goods&#x27;&gt;&lt;/my-goods&gt;</span><br><span class="line">     &lt;/view&gt;</span><br><span class="line">  &lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">		data() &#123;</span><br><span class="line">			return &#123;</span><br><span class="line">               // 需要向子组件传递的数据</span><br><span class="line">				goods:&#x27;你好&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>子组件接收父组件的值</p>
</blockquote>
<ul>
<li>接收父组件传来的数据 直接调用即可 无需在<code>data()</code>中储存</li>
<li>可以设置<code>default</code> 默认数据 <code>required</code>必填项 <code>type</code>数据类型 来规范传值</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;view&gt;</span><br><span class="line">     接收父组件传来的数据 &#123;&#123;goods&#125;&#125;</span><br><span class="line">  &lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">	// 通过props获取父组件传来的数据</span><br><span class="line">        props:&#123;</span><br><span class="line">            goods:&#123;</span><br><span class="line">                // 默认数据设置</span><br><span class="line">                  default: &#x27;&#x27;,</span><br><span class="line">                // 是否必填项</span><br><span class="line">                  required: false</span><br><span class="line">     		 &#125;</span><br><span class="line">   		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h2 id="子向父传值"><a href="#子向父传值" class="headerlink" title="子向父传值"></a>子向父传值</h2><ul>
<li>uniapp父子传值操作和vue一致</li>
</ul>
<blockquote>
<p>子组件向父组件传值</p>
</blockquote>
<ul>
<li>向父组件进行传值<ul>
<li><code>this.$emit(&#39;传递父组的名称&#39;,传递的数据)</code></li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;view&gt;</span><br><span class="line">      &lt;!-- 向父组件传递数据 --&gt;</span><br><span class="line">    &lt;view @click=&quot;getID(id)&quot;&gt;</span><br><span class="line">  &lt;/view&gt;</span><br><span class="line">  &lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">        methods:&#123;</span><br><span class="line">          getID(id)&#123;</span><br><span class="line">              // 向父组件传递数据</span><br><span class="line">              // this.$emit(&#x27;传递父组的名称&#x27;,传递的数据)</span><br><span class="line">            this.$emit(&#x27;demo1&#x27;,id)</span><br><span class="line">          &#125;</span><br><span class="line">       &#125;</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>父组件接收子组件传来的值</p>
</blockquote>
<ul>
<li>子组件传递的数据 必须在<code>data()</code>中储存 才能使用</li>
<li>接收<code>my-goods</code>组件传来的值 通过<code>@</code>接收子组件传递的数据</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;view&gt;</span><br><span class="line">      &lt;!-- 接收子组件传递的数据 --&gt;</span><br><span class="line">     &lt;my-goods @demo1=&quot;demo1&quot;&gt;&lt;/my-goods&gt;</span><br><span class="line">       &lt;view&gt;&#123;&#123;demo1&#125;&#125;&lt;/view&gt;</span><br><span class="line">   &lt;/view&gt;</span><br><span class="line">  &lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">	export default &#123;</span><br><span class="line">	data() &#123;</span><br><span class="line">		return &#123;</span><br><span class="line">			// 储存子组件传递的数据</span><br><span class="line">				demo1:&#x27;&#x27;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;,</span><br><span class="line">	    methods:&#123;</span><br><span class="line">	    // 获取子组件传递的数据</span><br><span class="line">           demo1(data)&#123;</span><br><span class="line">             this.demo1 = data</span><br><span class="line">           &#125;,</span><br><span class="line">		&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h1 id="10-uniapp创建Vuex"><a href="#10-uniapp创建Vuex" class="headerlink" title="10. uniapp创建Vuex"></a>10. uniapp创建Vuex</h1><h2 id="uniapp创建Vuex步骤"><a href="#uniapp创建Vuex步骤" class="headerlink" title="uniapp创建Vuex步骤"></a>uniapp创建Vuex步骤</h2><ul>
<li>默认uniapp是没有Vuex文件夹的 需要手动创建</li>
<li>Vuex的方法在uniapp也适用</li>
</ul>
<ol>
<li>在项目根目录中创建 <code>store</code> 文件夹，专门用来存放 vuex 相关的模块</li>
<li>在 <code>store</code> 目录上鼠标右键，选择 <code>新建 -&gt; js文件</code>，新建 <code>store.js</code> 文件：</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210817211726180.png" alt="image-20210817211726180"></p>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/downlo1ad.png" alt="downlo1ad"></p>
<ol start="3">
<li>在 <code>store.js</code> 中按照如下 4 个步骤<strong>初始化 Store 的实例对象</strong>：</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 导入 Vue 和 Vuex</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vuex</span> <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 将 Vuex 安装为 Vue 的插件</span></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vuex</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 创建 Store 的实例对象</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">  <span class="comment">// TODO：挂载 store 模块</span></span><br><span class="line">  <span class="attr">modules</span>: &#123;&#125;,</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 向外共享 Store 的实例对象</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>在 <code>main.js</code> (入口文件) 中导入 <code>store</code> 实例对象并挂载到 Vue 的实例上：</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 导入 store 的实例对象</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store/store.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 省略其它代码...</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = <span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  ...<span class="title class_">App</span>,</span><br><span class="line">  <span class="comment">// 2. 将 store 挂载到 Vue 实例上</span></span><br><span class="line">  store,</span><br><span class="line">&#125;)</span><br><span class="line">app.$mount()</span><br></pre></td></tr></table></figure>

<h2 id="进行Vuex拆分"><a href="#进行Vuex拆分" class="headerlink" title="进行Vuex拆分"></a>进行Vuex拆分</h2><ul>
<li>为了方便管理数据 会把不同功能的Vuex进行拆分 统一在一个Vuex中导入</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210817212349665.png" alt="image-20210817212349665"></p>
<ol>
<li>在 <code>store</code> 目录上鼠标右键，选择 <code>新建 -&gt; js文件</code>，创建购物车的 store 模块，命名为 <code>cart.js</code>：</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/downlo1ad.png" alt="downlo1ad"></p>
<ol start="2">
<li>在 <code>cart.js</code> 中，初始化如下的 vuex 模块：</li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">export default <span class="punctuation">&#123;</span></span><br><span class="line">  <span class="comment">// 为当前模块开启命名空间</span></span><br><span class="line">  namespaced<span class="punctuation">:</span> <span class="keyword">true</span><span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 模块的 state 数据</span></span><br><span class="line">  state<span class="punctuation">:</span> () =&gt; (<span class="punctuation">&#123;</span></span><br><span class="line">  <span class="punctuation">&#125;</span>)<span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 模块的 mutations 方法</span></span><br><span class="line">  mutations<span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 模块的 getters 属性</span></span><br><span class="line">  getters<span class="punctuation">:</span> <span class="punctuation">&#123;</span><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure>

<ol start="3">
<li><p>在 <code>store/store.js</code> 模块中，导入并挂载购物车的 vuex 模块，示例代码如下：</p>
<ul>
<li>导入vuex拆分模块</li>
<li>注册vuex模块 左侧是vuex组件名称 右侧是导入的vuex拆分组件</li>
<li>最后导出vuex模块管理 在main.js入口文件中导入</li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Vuex</span> <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="comment">// 1. 导入vuex拆分模块</span></span><br><span class="line"><span class="keyword">import</span> moduleCart <span class="keyword">from</span> <span class="string">&#x27;./cart.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Vuex</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> <span class="title class_">Vuex</span>.<span class="title class_">Store</span>(&#123;</span><br><span class="line">  <span class="comment">// TODO：挂载 store 模块</span></span><br><span class="line">  <span class="attr">modules</span>: &#123;</span><br><span class="line">    <span class="comment">// 2. 注册vuex模块 左侧是vuex组件名称 右侧是导入的vuex拆分组件</span></span><br><span class="line">    <span class="attr">m_cart</span>: moduleCart,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;)</span><br><span class="line">	<span class="comment">// 3. 最后导出vuex模块管理 在main.js入口文件中导入</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store</span><br></pre></td></tr></table></figure>

<h1 id="11-uniapp持久化方案"><a href="#11-uniapp持久化方案" class="headerlink" title="11. uniapp持久化方案"></a>11. uniapp持久化方案</h1><h2 id="uniapp持久化"><a href="#uniapp持久化" class="headerlink" title="uniapp持久化"></a>uniapp持久化</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/storage/storage?id=setstorage">uniapp提供持久化官网方法</a></li>
<li>通常我们会通过 session临时储存用户的一些数据 实现组件之间的数据持久化</li>
<li>获取session数据 需要通过<code>JSON.stringify</code>转化为json数据 和 <code>JSON.parse</code> 把json数据转换字符串</li>
<li>uniapp提供的持久化session方法(临时储存)<ul>
<li><code>uni.setStorageSync(&#39;session储存名称&#39;,JSON.stringify(需要储存的数据)) </code> 同步向session储存数据</li>
<li><code>JSON.parse.(uni.getStorageSync(&#39;session储存名称&#39;)) </code>同步获取session储存的数据</li>
<li><code>uni.removeStorageSync(&#39;session储存名称&#39;,&#39;替换的内容&#39;)</code> 同步删除(替换)session储存的数据</li>
</ul>
</li>
</ul>
<h1 id="12-uniapp的mixins混入"><a href="#12-uniapp的mixins混入" class="headerlink" title="12. uniapp的mixins混入"></a>12. uniapp的mixins混入</h1><h2 id="mixins混入场景"><a href="#mixins混入场景" class="headerlink" title="mixins混入场景"></a>mixins混入场景</h2><ul>
<li>在uniapp中也支持mixins混入 我们会把一些常用的方法进行混入(比如给tabBar添加角标)</li>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/ui/tabbar?id=settabbarbadge">uni.setTabBarBadge()</a> 设置角标方法</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210818133610721.png" alt="image-20210818133610721"></p>
<h2 id="设置mixins混入"><a href="#设置mixins混入" class="headerlink" title="设置mixins混入"></a>设置mixins混入</h2><ol>
<li>通常需要手动创建混入文件夹</li>
</ol>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210818134037400.png" alt="image-20210818134037400"></p>
<ol start="2">
<li>在组件中 导入混入文件<ul>
<li>通过<code>import</code>导入混入的文件</li>
<li>在<code>&lt;script&gt;&lt;/script&gt;</code>中用<code>mixins:[]</code>接收导入混入文件</li>
</ul>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">// 导入封装的mixins混入(添加tabBar角标)</span><br><span class="line">import TabBarM from &#x27;@/mixins/tabbar-badge.js&#x27;</span><br><span class="line">import &#123; mapState,mapMutations &#125; from &#x27;vuex&#x27;</span><br><span class="line">	export default &#123;</span><br><span class="line">	// 接收mixins混入的文件</span><br><span class="line">    mixins:[TabBarM],</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>注意: 混入只能储存常用 通用方法 其他的不能储存(<code>data()</code> 也可以储存)</p>
<h1 id="13-uniapp常用方法"><a href="#13-uniapp常用方法" class="headerlink" title="13. uniapp常用方法"></a>13. uniapp常用方法</h1><h2 id="uniapp同步获取系统信息"><a href="#uniapp同步获取系统信息" class="headerlink" title="uniapp同步获取系统信息"></a>uniapp同步获取系统信息</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync">uniapp 获取系统信息官网方法</a></li>
<li>可以通过uniapp提供方法<code> uni.getSystemInfoSync()</code> 查看系统信息</li>
<li>通常可以获取当前高度进行一些处理</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取窗口高度</span></span><br><span class="line"><span class="keyword">const</span> &#123; windowHeight &#125; = uni.<span class="title function_">getSystemInfoSync</span>()</span><br></pre></td></tr></table></figure>

<h2 id="uniapp设置tabBar角标"><a href="#uniapp设置tabBar角标" class="headerlink" title="uniapp设置tabBar角标"></a>uniapp设置tabBar角标</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/ui/tabbar?id=settabbarbadge">uni.setTabBarBadge()</a> 设置角标方法</li>
<li>可以使用<code>onShow</code> 生命周期 来更新角标的动态数据</li>
<li>该方法只适合tabBar 设置角标 并且需要给每个tabBar设置该角标方法 否则只会在设置组件中显示(可以用mixins混入)</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210818135020891.png" alt="image-20210818135020891"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">setBadge</span>(<span class="params"></span>)&#123;</span><br><span class="line">  <span class="comment">// 给tabBar添加角标</span></span><br><span class="line">  uni.<span class="title function_">setTabBarBadge</span>(&#123;</span><br><span class="line">    <span class="comment">// 根据tabBar索引添加角标</span></span><br><span class="line">    <span class="attr">index</span>:<span class="number">2</span>,</span><br><span class="line">     <span class="comment">// 设置角标显示数量</span></span><br><span class="line">    <span class="comment">// 角标需要字符串数据 需要转换字符串</span></span><br><span class="line">    <span class="attr">text</span>:<span class="title class_">String</span>(<span class="string">&#x27;123&#x27;</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h2 id="uniapp-获取用户地址信息"><a href="#uniapp-获取用户地址信息" class="headerlink" title="uniapp 获取用户地址信息"></a>uniapp 获取用户地址信息</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/other/choose-address?id=chooseaddress">uni.chooseAddress()</a> 该方法可以通过微信等(基于平台) 获取用户地址信息</li>
<li>该方法是一个异步操作 需要设置<code>async</code> <code>awite</code></li>
<li>该方法只适合小程序</li>
<li>选择收货地址 返回的是一个数组 <ul>
<li>参数1是错误对象 当没有正确获取地址时候才有 正确获取为null</li>
<li>参数2是返回收货地址对象</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">    <span class="keyword">async</span> <span class="title function_">choseAddress</span>(<span class="params"></span>)&#123;</span><br><span class="line">      <span class="comment">// 选择收货地址 返回的是一个数组 </span></span><br><span class="line">      <span class="comment">// 参数1是错误对象 当没有正确获取地址时候才有 正确获取为null</span></span><br><span class="line">      <span class="comment">// 参数2是返回收货地址对象</span></span><br><span class="line">      <span class="keyword">const</span> [err,succ] = <span class="keyword">await</span> uni.<span class="title function_">chooseAddress</span>()</span><br><span class="line">      <span class="comment">// 判断如果正常获取到地址对象</span></span><br><span class="line">      <span class="keyword">if</span>(err === <span class="literal">null</span>)&#123;</span><br><span class="line"><span class="comment">// 进行储存用户的地址信息</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h2 id="uniapp-启动付款"><a href="#uniapp-启动付款" class="headerlink" title="uniapp 启动付款"></a>uniapp 启动付款</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment">uni.requestPayment() 启动付款官方介绍</a></li>
<li>该方法是一个异步操作 需要设置<code>async</code> <code>awite</code></li>
<li>启动付款 返回的是一个数组 <ul>
<li>参数1是错误对象 当没有正确付款时候才有 正确获取为null</li>
<li>参数2是返回付款详细信息</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">    <span class="keyword">async</span> <span class="title function_">choseAddress</span>(<span class="params"></span>)&#123;</span><br><span class="line">      <span class="comment">// 启动付款 返回的是一个数组 </span></span><br><span class="line">      <span class="comment">// 参数1是错误对象 当没有正确付款时候才有 正确获取为null</span></span><br><span class="line">      <span class="comment">// 参数2是返回收货地址对象</span></span><br><span class="line">      <span class="keyword">const</span> [err,succ] = <span class="keyword">await</span> uni.<span class="title function_">requestPayment</span>()</span><br><span class="line">      <span class="comment">// 判断如果正常获取到地址对象</span></span><br><span class="line">      <span class="keyword">if</span>(err === <span class="literal">null</span>)&#123;</span><br><span class="line"><span class="comment">// 进行付款成功后进行的操作</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>

<h2 id="uniapp-登录方法"><a href="#uniapp-登录方法" class="headerlink" title="uniapp 登录方法"></a>uniapp 登录方法</h2><ul>
<li>uniapp可以通过平台获取登录信息弹窗</li>
<li><font color =#ff3040>注意: 微信小程序方法 和 其他平台不一样需要单独设置</font><ul>
<li>非小程序登录方法 <a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo">uni.getUserInfo()</a> 小程序不能使用(小程序会匿名)</li>
<li>小程序登录方法 <a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/plugins/login?id=getuserprofile">uni.getUserProfile()</a><ul>
<li>小程序登录有必填项 <code> desc</code> 用来记录作用</li>
<li>小程序登录必须需要添加到公司开发者中 用公司appid才能成功</li>
</ul>
</li>
</ul>
</li>
<li>该方法是一个异步操作 需要设置<code>async</code> <code>awite</code></li>
</ul>
<blockquote>
<p>小程序登录方式</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210819192153825.png" alt="image-20210819192153825"></p>
<ul>
<li>小程序登录方法 <a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/plugins/login?id=getuserprofile">uni.getUserProfile()</a><ul>
<li>小程序登录有必填项 <code> desc</code> 用来记录作用</li>
</ul>
</li>
<li>该方法是一个异步操作 需要设置<code>async</code> <code>awite</code></li>
<li>启动登录 返回的是一个数组 <ul>
<li>参数1是错误对象 当没有正确登录时候才有 正确获取为null</li>
<li>参数2是返回登录后详细信息(头像 名称等)</li>
</ul>
</li>
<li>注意: 发送请求获取token 开发时候必须添加到公司开发者中 用公司appid才能成功</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">    <span class="keyword">async</span> <span class="title function_">choseAddress</span>(<span class="params"></span>)&#123;       </span><br><span class="line"><span class="comment">// 今年4月13日 getUserInfo方法只能获取到匿名用户信息 已经不好用了</span></span><br><span class="line">      <span class="comment">// uni.getUserProfile 获取到用户的真实信息</span></span><br><span class="line">      <span class="comment">// 1. 获取用户信息</span></span><br><span class="line">      <span class="keyword">const</span> [err,succ] = <span class="keyword">await</span> uni.<span class="title function_">getUserProfile</span>(&#123;</span><br><span class="line">        <span class="comment">// 必填项 获取信息的用途(自定义)</span></span><br><span class="line">        <span class="attr">desc</span>:<span class="string">&#x27;登录&#x27;</span></span><br><span class="line">      &#125;)</span><br><span class="line">       <span class="keyword">if</span>(err === <span class="literal">null</span>)&#123;</span><br><span class="line"><span class="comment">// 进行登录成功后进行的操作</span></span><br><span class="line">      &#125;</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>

<h2 id="uniapp-配合登录获得code"><a href="#uniapp-配合登录获得code" class="headerlink" title="uniapp 配合登录获得code"></a>uniapp 配合登录获得code</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/plugins/login?id=login">uni.login() 官网方法</a> 配合登录成功后 获取用户的code</li>
<li>有的后端需要用户登录成功后的code 需要用到该方法</li>
<li>该方法是一个异步操作 需要设置<code>async</code> <code>awite</code></li>
<li>启动登录 返回的是一个数组 <ul>
<li>参数1是错误对象 当没有正确登录时候才有 正确获取为null</li>
<li>参数2是返回code数据</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="title function_">choseAddress</span>(<span class="params"></span>)&#123;     </span><br><span class="line"><span class="comment">// 获取同的code配合登录</span></span><br><span class="line">		<span class="keyword">const</span> [err1,loginsucc] = <span class="keyword">await</span> uni.<span class="title function_">login</span>()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="uniapp-确认弹出层"><a href="#uniapp-确认弹出层" class="headerlink" title="uniapp 确认弹出层"></a>uniapp 确认弹出层</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/plugins/login?id=getuserprofile">uni.showModal() 官网方法</a> 会弹出一个确认的弹出层<ul>
<li>该方法是一个异步操作 需要设置<code>async</code> <code>awite</code></li>
<li>确认弹出层 返回的是一个数组 <ul>
<li>参数1是错误对象 当没有正确弹出时候才有 正确获取为null</li>
<li>参数2是返回确认弹出层参数(点击取消 和 点击确认的状态位)<ul>
<li><code>confirm</code> 是确认的状态位 (点击为true)</li>
</ul>
</li>
</ul>
</li>
<li>弹出层的常用参数<ul>
<li><code>title</code> 是标题文本</li>
<li><code>content</code>是内容文本</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210819201414313.png" alt="image-20210819201414313"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">    <span class="keyword">async</span> <span class="title function_">delLogin</span>(<span class="params"></span>)&#123;</span><br><span class="line">     <span class="comment">// 确认弹出层</span></span><br><span class="line">     <span class="keyword">const</span> [err,succ] = <span class="keyword">await</span> uni.<span class="title function_">showModal</span>(&#123;</span><br><span class="line">     <span class="comment">// 标题文本</span></span><br><span class="line">       <span class="attr">title</span>:<span class="string">&#x27;提示&#x27;</span>,</span><br><span class="line">       <span class="comment">// 内容文本</span></span><br><span class="line">       <span class="attr">content</span>:<span class="string">&#x27;是否退出登录&#x27;</span></span><br><span class="line">     &#125;)</span><br><span class="line">     <span class="comment">// 判断确认状态位 如果确认进行操作</span></span><br><span class="line">     <span class="keyword">if</span>(succ.<span class="property">confirm</span>)&#123;</span><br><span class="line"><span class="comment">// 点击确认按钮执行的操作</span></span><br><span class="line">     &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="uniapp-普通弹出层"><a href="#uniapp-普通弹出层" class="headerlink" title="uniapp 普通弹出层"></a>uniapp 普通弹出层</h2><ul>
<li><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/api/ui/prompt?id=showtoast">uni.showToast() 官网方法</a></li>
<li>普通弹出层不具备操作按钮 常用于提示</li>
<li>普通弹出层默认参数<ul>
<li><code>icon</code> 字体图标设置</li>
<li><code>duration</code> 弹出层持续时间</li>
<li><code>title</code> 标题文本</li>
<li><code>mark</code> 是否显示透明蒙层，防止触摸穿透(防止用户点击取消弹出层)</li>
</ul>
</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/image-20210819202121653.png" alt="image-20210819202121653"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 普通弹出层方法</span></span><br><span class="line">  <span class="title function_">showTips</span>(<span class="params"></span>)&#123;</span><br><span class="line">    uni.<span class="title function_">showToast</span>(&#123;</span><br><span class="line">      <span class="comment">// 设置图标(不设置)</span></span><br><span class="line">      <span class="attr">icon</span>: <span class="string">&#x27;none&#x27;</span>,</span><br><span class="line">      <span class="comment">// 提示持续时间</span></span><br><span class="line">      <span class="attr">duration</span>: <span class="number">1500</span>,</span><br><span class="line">      <span class="comment">// 提示文本</span></span><br><span class="line">      <span class="attr">title</span>:<span class="string">&#x27;登录失败&#x27;</span>,</span><br><span class="line">      <span class="comment">// 添加遮罩层(防止触摸)</span></span><br><span class="line">      <span class="attr">mask</span>:<span class="literal">true</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>




        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/08/23/uniapp/2_uniapp/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/08/23/uniapp/2_uniapp/";
            const title         = "「uniapp的学习笔记」";
            const excerpt       = `::: tip 介绍uniapp的个人学习笔记:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/uniapp/" rel="tag">uniapp</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" JS实用小技巧" href="/2021/08/21/JavaScript/1_ji_qiao/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" uniapp页面关联微信" href="/2021/08/23/uniapp/1_uniapp_h5/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>